<!-- <template>
  <div class="cyber-buddha">
    <div class="buddha-container">
      <img :src="currentBuddhaImage" class="buddha-image" @click="showBuddhaInfo">
      <div class="merit-bar">
        <div class="merit-progress" :style="{ width: meritPercentage + '%' }"></div>
        <span class="merit-text">功德值: {{ meritPoints }}</span>
      </div>
    </div>
    
    <div class="input-section">
      <input v-model="userQuestion" placeholder="向佛祖提问..." @keyup.enter="askBuddha">
      <button @click="askBuddha">提问</button>
    </div>
    
    <div class="response-section">
      <p class="buddha-response">{{ buddhaResponse }}</p>
    </div>
    
    <div class="action-buttons">
      <button class="wooden-fish" @click="knockWoodenFish">
        <img src="@/assets/wooden-fish.png" alt="木鱼">
      </button>
      <button class="incense" @click="burnIncense">上香</button>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import woodenFishSound from '@/assets/sounds/wooden-fish.mp3';

export default {
  name: 'CyberBuddha',
  data() {
    return {
      userQuestion: '',
      buddhaResponse: '',
      meritPoints: localStorage.getItem('meritPoints') || 0,
      currentBuddhaImage: require('@/assets/buddha-basic.png'),
      currentForm: 'basic',
      forms: {
        basic: { image: require('@/assets/buddha-basic.png'), threshold: 100 },
        bodhisattva: { image: require('@/assets/buddha-bodhisattva.png'), threshold: 500 },
        future: { image: require('@/assets/buddha-future.png'), threshold: 1000 }
      },
      woodenFishAudio: new Audio(woodenFishSound)
    }
  },
  computed: {
    meritPercentage() {
      const currentThreshold = this.forms[this.currentForm].threshold;
      return Math.min((this.meritPoints / currentThreshold) * 100, 100);
    }
  },
  methods: {
    askBuddha() {
      if (!this.userQuestion.trim()) {
        this.buddhaResponse = '请输入您的问题';
        return;
      }
      
      axios.post('/api/buddha-interaction', {
        question: this.userQuestion,
        meritPoints: this.meritPoints
      }).then(response => {
        this.buddhaResponse = response.data.comment;
        this.meritPoints += response.data.meritAward;
        localStorage.setItem('meritPoints', this.meritPoints);
        this.checkEvolution();
      }).catch(() => {
        this.buddhaResponse = '佛祖正在参悟...请稍后再试';
      });
    },
    knockWoodenFish() {
      this.woodenFishAudio.play();
      this.meritPoints += 1;
      localStorage.setItem('meritPoints', this.meritPoints);
      this.checkEvolution();
    },
    burnIncense() {
      // 模拟观看广告增加功德值
      this.meritPoints += 50;
      localStorage.setItem('meritPoints', this.meritPoints);
      this.checkEvolution();
    },
    checkEvolution() {
      for (const [form, config] of Object.entries(this.forms)) {
        if (this.meritPoints >= config.threshold && this.currentForm !== form) {
          this.currentForm = form;
          this.currentBuddhaImage = config.image;
          this.buddhaResponse = '恭喜！佛祖已进化！';
          break;
        }
      }
    },
    showBuddhaInfo() {
      alert(`当前形态: ${this.currentForm}\n功德值: ${this.meritPoints}`);
    }
  },
  mounted() {
    this.checkEvolution();
  }
}
</script>

<style scoped>
.cyber-buddha {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
  background-color: #2E2E2E;
  color: #FFD700;
  min-height: 100vh;
}

.buddha-container {
  margin-bottom: 20px;
}

.buddha-image {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
  cursor: pointer;
  border: 3px solid #FFD700;
}

.merit-bar {
  width: 100%;
  height: 20px;
  background-color: #555;
  border-radius: 10px;
  margin-top: 10px;
  position: relative;
}

.merit-progress {
  height: 100%;
  background-color: #FFD700;
  border-radius: 10px;
  transition: width 0.3s;
}

.merit-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #000;
  font-weight: bold;
}

.input-section {
  margin: 20px 0;
}

.input-section input {
  padding: 10px;
  width: 70%;
  margin-right: 10px;
  background-color: #444;
  color: #FFD700;
  border: 1px solid #FFD700;
}

.input-section button {
  padding: 10px 15px;
  background-color: #FFD700;
  color: #2E2E2E;
  border: none;
  cursor: pointer;
}

.response-section {
  min-height: 60px;
  margin: 20px 0;
  padding: 15px;
  background-color: #444;
  border-radius: 5px;
}

.buddha-response {
  margin: 0;
}

.action-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.wooden-fish, .incense {
  padding: 10px 20px;
  background-color: #FFD700;
  color: #2E2E2E;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.wooden-fish img {
  width: 30px;
  height: 30px;
}
</style> -->